<html>
<head>
	<meta charset="UTF-8">
	<title>opacity</title>
	<style type="text/css">
		ul {
			list-style: none;
			display: block;
			height: 50px;
			padding: 0;
		}
		li.opacity{
			float: left;
			width: 50px;
			height: 50px;
		}
		li.opacity1 {
			background: rgb(82,189,68);
			opacity: 1;
			filter:alpha(opacity=100);
		}
		li.opacity2 {
			background: rgb(82,189,68);
			opacity: 0.8;
			filter:alpha(opacity=80);
		}
		li.opacity3 {
			background: rgb(82,189,68);
			opacity: 0.6;
			filter:alpha(opacity=60);
		}
		li.opacity4 {
			background: rgb(82,189,68);
			opacity: 0.4;
			filter:alpha(opacity=40);
		}
		li.opacity5 {
			background: rgb(82,189,68);
			opacity: 0.2;
			filter:alpha(opacity=20);
		}
		li.opacity6 {
			background: rgb(82,189,68);
			opacity: 0;
			filter:alpha(opacity=0);
		}
		li.rgba {
			float: left;
			width: 50px;
			height: 50px;
		}
		li.rgba1 {
			background: rgba(82,189,68,1);
		}
		li.rgba2 {
			background: rgba(82,189,68,0.8);
		}
		li.rgba3 {
			background: rgba(82,189,68,0.6);
		}
		li.rgba4 {
			background: rgba(82,189,68,0.4);
		}
		li.rgba5 {
			background: rgba(82,189,68,0.2);
		}
		li.rgba6 {
			background: rgba(82,189,68,0);
		}

	</style>
</head>
<body>
	<div class="example-opacity">
	  <p>Opacity效果</p>
	  <ul>
	   <li class="opacity opacity1">100%</li>
	   <li class="opacity opacity2">80%</li>
	   <li class="opacity opacity3">60%</li>
	   <li class="opacity opacity4">40%</li>
	   <li class="opacity opacity5">20%</li>
	   <li class="opacity opacity6">0</li>
	  </ul>
	  <p>CSS3的RGBA效果</p>
	  <ul>
	   <li class="rgba rgba1">1</li>
	   <li class="rgba rgba2">0.8</li>
	   <li class="rgba rgba3">0.6</li>
	   <li class="rgba rgba4">0.4</li>
	   <li class="rgba rgba5">0.2</li>
	   <li class="rgba rgba6">0</li>
	 </ul>
	</div>
</body>
</html>